<div class="page">
    <div class="info">
        <div>
            <h1 class="title">基本信息</h1>
        </div>
        <div style="justify-content: space-between;">
            <div>模型名称: <span class="DataSpan">{{ modelData.model_name }}</span></div>
            <div style="width: 50%;">描述: <span class="DataSpan">{{ modelData.description }}</span></div>
        </div>
        <div>任务类型: <span class="DataSpan">{{ modelData.task_type }}</span></div>
    </div>
    <div class="actions">
        <nz-tabset [nzAnimated]="'false'">
            <nz-tab nzTitle=" 数据处理 ">
                <div class="domain">
                    <div class="item-title">标题检索模块</div>
                    <div class="item-context">
                        <nz-collapse>
                            <nz-collapse-panel nzHeader="规则" nzActive="true" [nzExtra]="extraTpl" [ngStyle]="customStyle">
                                <div class="rows">
                                    <div class="row-title" style="padding-top: 10px;">逆向检索</div>
                                    <div class="row-input">
                                        <nz-switch [(ngModel)]="titleList.is_reverse" [disabled]="stateTitle == true"></nz-switch>
                                    </div>
                                </div>
                                <div class="rows" style="margin-top: 10px;">
                                    <!--  *ngFor="let item of ModelTitleConfig" -->
                                    <div class="row-title">标题检索</div>
                                    <div class="row-input">
                                        <div *ngFor="let items of titleList.search_pattern;let key=index;">
                                            <nz-input-group nzAddOnBefore="{{getlength(key+1)}}级标题" class="ginput">
                                                <input style="width: 281px;" type="text" nz-input [(ngModel)]="items.value" [disabled]="stateTitle == true" [readOnly]="!titleList.is_reverse" placeholder="请填写标题内容"/>
                                            <!--  (change)="changeTitle(key,$event)"  -->
                                            </nz-input-group>
                                            <!-- <img  src="../../../../../assets/images/delete.png" alt="" > -->
                                            <button class="TitleDelet" *ngIf="key != 0" [ngClass]="{'not-allowed': stateTitle == true}" style="margin-bottom: 4px; width: 20px; margin-left: 6px; border: 0; outline: none; background-color: transparent;" (click)="deleteTitle(key)"></button>
                                        </div>

                                        <div *ngIf="stateTitle == false" class="addTitle" (click)="addTitle()"><img style="margin-right: 4px;" src="../../../../../assets/images/icon_add.png" alt="">新增标题</div>
                                    </div>
                                </div>
                            </nz-collapse-panel>
                        </nz-collapse>
                        <ng-template #extraTpl>
                            <div *ngIf="stateTitle == false" style="color: #526ECC;" (click)="updateTitleConfig();$event.cancelBubble=true;">保存</div>
                            <div *ngIf="stateTitle == true" style="color: #526ECC;" (click)="editTitleConfig();$event.cancelBubble=true;">编辑</div>
                        </ng-template>
                    </div>
                    <div class="item-title">数据处理</div>
                    <div class="item-context">
                        <nz-collapse>
                            <nz-collapse-panel nzHeader="工作流" nzActive="true" [ngStyle]="customStyle">
                                <div class="row-input-bpm" *ngFor="let data of processConfig;let i = index">
                                    <!-- *ngFor="let data of item.ops; let s = index" -->
                                    <div style="padding-top: 15px;">
                                        <span>操作</span>
                                        <nz-select style="width: 160px; height: 28px;" [nzDisabled]="!data.op_config.isTrue" [(ngModel)]="data.op_config.op" (ngModelChange)="operationSelect($event,i)">
                                            <nz-option *ngFor="let p of provinceDatas" [nzValue]="p.type" [nzLabel]="p.op"></nz-option>
                                        </nz-select>
                                        <span>类型</span>
                                        <nz-select style="width: 160px; height: 28px;"[nzDisabled]="!data.op_config.isTrue" [(ngModel)]="data.op_config.type" (ngModelChange)="typeSelect($event)">
                                            <nz-option *ngFor="let c of cityData[data.op_config.op]" [nzValue]="c.type" [nzLabel]="c.op"></nz-option>
                                        </nz-select>
                                        <!-- 关键词 -->
                                        <span style="margin-left: 30px;" *ngIf="data.op_config.op == 'filter'">关键词</span>
                                        <input style="width: 360px; height: 28px;" nz-input [disabled]="!data.op_config.isTrue"
                                        *ngIf="data.op_config.op == 'filter'" [(ngModel)]="data.op_config.keywords" placeholder="多个关键词用逗号分隔" />
                                        <!-- 正则表达式 -->
                                        <span style="margin-left: 30px;" *ngIf="data.op_config.op == 'search'">正则表达式</span>
                                        <input style="width: 360px; height: 28px;" [(ngModel)]="data.op_config.pattern" *ngIf="data.op_config.op == 'search'" [disabled]="!data.op_config.isTrue" nz-input placeholder="匹配的正则表达式"/>
                                        <!-- 贴合页面样式用 -->
                                        <div style="width: 492px; height: 28px;" *ngIf="data.op_config.op == 'split'"></div>
                                        <div style="padding: 0px;">
                                            <!-- 编辑 -->
                                            <img *ngIf="data.op_config.isTrue == false" src="../../../../../assets/images/icon_edit_h.png" alt="" (click)="editConfig(i)">
                                            <!-- 更新 -->
                                            <img *ngIf="data.op_config.isTrue == true" src="../../../../../assets/images/hover.svg" alt="" (click)="updateConfig(data.op_id,i)">
                                            <!-- 删除 -->
                                            <img src="../../../../../assets/images/delete.png" alt="" (click)="deleteConfig(data.op_id,i,data.op_config.isTrue)">
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 8px;" class="addTitle" (click)="addModel()"><img src="../../../../../assets/images/icon_add.png" alt="">&nbsp;&nbsp;新增规则</div>
                                <!-- </div> -->
                            </nz-collapse-panel>
                        </nz-collapse>
                    </div>
                    <div class="item-button"><button nz-button nzType="defalut" (click)="exportTrain()">导出数据</button></div>
                </div>
            </nz-tab>
            <nz-tab nzTitle=" 导入模型 ">
                <div class="importTab">
                    <div style="margin-bottom: 20px;">
                        <div class="imp-title">模型类型</div>
                        <div class="imp-ctx">
                            <!-- <nz-select style="width: 200px;" nzAllowClear nzPlaceHolder="请选择">
                                <nz-option nzValue="lstm_crf" nzLabel="lstm_crf"></nz-option>
                                <nz-option nzValue="tinybert" nzLabel="tinybert"></nz-option>
                                <nz-option nzValue="bert" nzLabel="bert"></nz-option>
                            </nz-select> -->
                            <nz-select [(ngModel)]="selectedModeType"   style="width: 200px;" nzPlaceHolder="请选择" >
                                <nz-option *ngFor="let p of modeTypes" [nzValue]="p" [nzLabel]="p"></nz-option>
                              </nz-select>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;">
                        <div class="imp-title">模型文件</div>
                        <div>
                            <input type="text"  readonly="readonly" [(ngModel)]="uploadFileName" class="upload_file_input" placeholder="请先选择上传文件" (click)="fileInput2.click()">
                            <input type="file" style="display:none;" (change)="getFile($event)" #fileInput2/>
                        </div>
                    </div>
                    <div>
                        <div class="imp-title"></div>
                        <div class="imp-ctx">
                            <button nz-button nzType="primary" (click)="leadIn()" style="background-color: #F66F6A;color: white;border: none;" nzDanger>导入</button>
                        </div>
                    </div>
                </div>
            </nz-tab>
            <nz-tab nzTitle="  测试  ">
                <div class="testTab">
                    <div class="test-left">
                        <div class="test-title">测试文本</div>
                        <div class="test-ctx">
                            <textarea nz-input [(ngModel)]="textTest" maxlength="500" placeholder="" [nzBorderless]="true"></textarea>
                            <span style="text-align: right;padding-right: 20px;">{{textTest.length}}/500</span>
                            <div class="cut"></div>
                            <div class="test_button" (click)="testModel()">测试</div>
                        </div>
                    </div>
                    <div style="width: 4%;text-align: center; "><i nz-icon nzType="double-right" nzTheme="outline"></i></div>
                    <div class="test-right">
                        <div class="test-title">推理结果</div>
                        <div class="test-ctx"><textarea readonly="readonly" [(ngModel)]="reasoningTxt" nz-input placeholder=""></textarea></div>
                    </div>
                </div>
            </nz-tab>
        </nz-tabset>
    </div>
</div>
<!-- 删除的模态框 -->
<nz-modal [(nzVisible)]="deleteShow" nzTitle="删除" [nzWidth]='400' [nzFooter]=null nzCentered (nzOnCancel)="deleteshut()">
    <ng-container *nzModalContent>
        <p>确定删除吗？</p>
        <div style="display: flex; justify-content: flex-end;">
            <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="deleteOk()">确定</button>
            <button nz-button nzType="default" (click)="deleteshut()">取消</button>
        </div>
    </ng-container>
</nz-modal>